<script setup lang="ts">
import type { UnwrapRef } from 'vue'
import type { FormState } from '@/common/types/user-type'

const isPhoneLogin = ref(true) // 用于手机号和邮箱登录的切换
const isWechatScan = ref(false) // 控制微信扫一扫页面的显示
const isRegisterPage = ref(false) // 控制注册页面的显示

// 初始数据
const formState: UnwrapRef<FormState> = reactive({
  name: '', // 手机号码
  password: '', // 密码
  repassword: '', //  两次验证的密码
  verification: '', // 验证码
  mailbox: '', // 邮箱账号
  remember: [], // 用户协议
})

// 切换tab登录方式
const toggleLoginType = (isPhone: boolean) => {
  isPhoneLogin.value = isPhone
}

// 点击 "注册账号" 时，显示注册页面
const onRegisterClicked = (value: boolean) => {
  // 接收子组件传递的值，更新 isRegisterPage 状态
  isRegisterPage.value = value
}

// 点击 "其他方式时" 时，显示二维码
const onWechatClicked = (value: boolean) => {
  // 接收子组件传递的值，更新 isWechatScan 状态
  isWechatScan.value = value
}

// 点击 "返回登录时"，隐藏二维码
const onWechatClicked1 = (value: boolean) => {
  // 接收子组件传递的值，更新 isWechatScan 状态
  isWechatScan.value = value
}
</script>

<template>
  <div class="login">
    <a-row :gutter="12">
      <a-col :offset="2" :span="12">
        <!-- 判断是否显示表单显示 微信登录 -->
        <div v-if="!isWechatScan && !isRegisterPage">
          <!-- 切换登录方式按钮 -->
          <div class="login-toggle">
            <a-button
              :class="isPhoneLogin ? 'active' : 'active1'"
              @click="toggleLoginType(true)"
              type="link"
            >
              手机号登录
            </a-button>
            <a-button
              :class="!isPhoneLogin ? 'active' : 'active1'"
              @click="toggleLoginType(false)"
              type="link"
            >
              邮箱登录
            </a-button>
          </div>

          <!-- 手机号登录 -->
          <div v-if="isPhoneLogin">
            <educ-mobile-phone-login @wechatlogin="onWechatClicked" />
          </div>

          <!-- 邮箱登录 -->
          <div v-else>
            <educ-email-login @registerClicked="onRegisterClicked" />
          </div>
        </div>

        <!-- 微信扫一扫 -->
        <div v-if="isWechatScan">
          <educ-wechat-login @wechatlogin="onWechatClicked1" />
        </div>

        <!-- 注册邮箱账号 -->
        <div v-if="isRegisterPage">
          <educ-email-registration />
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<style lang="scss" scoped>
.login {
  display: flex;

  /* 水平对齐到右边 */
  align-items: center;
  justify-content: flex-end;

  /* 垂直居中 */
  width: 100%;
  height: 100vh;
  background-image: url('../../assets/bg.jpg');

  /* 防止背景图片重复 */
  background-repeat: no-repeat;

  /* 调整背景图片大小以覆盖整个元素 */
  background-size: cover;

  &-toggle {
    margin-bottom: 10px;
    text-align: center;
  }

  &-name {
    &-input {
      padding: 8px;
    }

    &-agreement {
      &-text {
        font-size: 12px;
        color: $educ-color-white;

        &-span {
          color: #14f417;
        }
      }
    }

    &-other {
      display: flex;
      align-items: center;
      justify-content: flex-end;

      &-icon {
        cursor: pointer;
        background-color: $educ-color-white;
      }
    }

    // 注册账号样式
    &-register {
      color: $educ-color-white;

      &-container {
        display: flex;
        align-items: center;
      }
    }

    // 注册登录按钮宽度
    &-button {
      width: 100%;
    }
  }

  // 微信扫一扫样式
  &-qrcode {
    width: 400px;
    text-align: center;

    &-content {
      display: flex;
      line-height: 50px;
      color: $educ-color-white;

      &-image {
        height: 180px;
      }
    }
  }
}

// 判断是否为手机号登录改变文字颜色
.active {
  font-size: 18px;
  color: $educ-color-white;
}

.active1 {
  font-size: 18px;
  color: #dedede;
}

// label 字体颜色
:deep(.ant-form-item .ant-form-item-label > label) {
  color: $educ-color-white !important;
}

// 选框位置
:deep(.ant-checkbox) {
  align-self: flex-start;
  margin-top: 5px;
}

// // 获取验证码行高
:deep(
  .ant-input-search
    > .ant-input-group
    > .ant-input-group-addon:last-child
    .ant-input-search-button:not(.ant-btn-primary)
) {
  height: 36px;
  color: #2a82e4;
}

:deep(.ant-checkbox-wrapper) {
  display: flex;
  align-items: flex-start; // 对齐多行文本
  line-height: 1.5; // 调整行高使内容更整齐
  white-space: normal; // 允许文字换行
}

// 内容之间的间距
:deep(.ant-form-item) {
  margin-bottom: 10px;
}

// 规则校验字体大小
:deep(.ant-form-item .ant-form-item-explain-error) {
  font-size: 12px;
}
</style>
